<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC >
<html>
<head>
<meta charset="utf-8">
<title>Hello</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<%@ include file="/WEB-INF/view/include/common.jsp"%>
<%@ include file="/WEB-INF/view/include/common-css.jsp"%>
</head>
<body>
	<div id="myAlert" class="alert alert-success">
		<a href="#" class="close" data-dismiss="alert">&times;</a> <strong>成功！</strong>结果是成功的。
	</div>
	<div align="center">
		<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">开始演示模态框</button>
	</div>
	
	<!-- 模态框（Modal） -->
	<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
					<h4 class="modal-title" id="myModalLabel">消息标题</h4>
				</div>
				<div class="modal-body">您确定发送这些消息？</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
					<button type="button" class="btn btn-primary" id="sendMsg">提交更改</button>
				</div>
			</div>
			<!-- /.modal-content -->
		</div>
		<!-- /.modal -->
	</div>
	<div style="height:20px,width:100px;"></div>
	<ul class="nav nav-tabs">
		<li class="active"><a href="#tab1" data-toggle="tab">Tab1</a></li>
		<li><a href="#tab2" data-toggle="tab">Tab2</a></li>
		<li><a href="#tab3" data-toggle="tab">Tab3</a></li>
	</ul>

	<div class="tab-content">
		<div class="tab-pane active" id="tab1">
			<img alt="" src="${ctx}/static/images/1.jpg">
		</div>
		<div class="tab-pane" id="tab2">
			<img alt="" src="${ctx}/static/images/2.jpeg">
		</div>
		<div class="tab-pane" id="tab3">
			<img alt="" src="${ctx}/static/images/3.jpg">
		</div>
	</div>
	<%@ include file="/WEB-INF/view/include/common-js.jsp"%>
	<script type="text/javascript">
		$(function() {
			$(".tabs a:last").tab("show");
			$("#myAlert").bind('closed.bs.alert', function() {
				alert("警告消息框被关闭。");
			});
			
			$("#sendMsg").bind("click",function(){
				alert("点击确认按钮");
			});
		});
	</script>
</body>
</html>
